<script src="http://unpkg.com/vue"></script>
<div id="app"></div>
<script>
  const { createApp } = Vue;
  const Mouse = {
    data() {
      return {
        x: 0,
        y: 0,
      };
    },
    methods: {
      update(e) {
        this.x = e.clientX;
        this.y = e.clientY;
      },
    },
    mounted() {
      window.addEventListener("mousemove", this.update);
    },
    unmounted() {
      window.addEventListener("mousemove", this.update);
    },
    render() {
      return (
        this.$slots.default &&
        this.$slots.default({
          x: this.x,
          y: this.y,
        })
      );
    },
  };
  const Other = {
    data() {
      return {
        x: 0,
        y: 0,
      };
    },
    methods: {
      update(e) {
        this.x = e.clientX + "px";
        this.y = e.clientY + "px";
      },
    },
    mounted() {
      window.addEventListener("mousemove", this.update);
    },
    unmounted() {
      window.addEventListener("mousemove", this.update);
    },
    render() {
      return (
        this.$slots.default &&
        this.$slots.default({
          x: this.x,
          y: this.y,
        })
      );
    },
  };
  const App = {
    components: { Mouse, Other },
    template: `<Mouse v-slot='{x, y}'>
        <Other v-slot='{x: otherX, y: otherY}'>
          {{x}} {{y}} --- {{otherX}} {{otherY}}
        </Other>
      </Mouse>`,
  };
  createApp(App).mount("#app");
</script>
